<template>
    <div>

        <table class="table table-bordered">
            <tr>
                <td>id</td>
                <td>名称</td>
                <td>联系电话</td>
                <td>图片</td>
                <td>地址</td>
                <td>类型</td>
            </tr>
            <tr v-for="item in date" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.ShopName }}</td>
                <td>{{ item.Phone }}</td>
                <img :src="item.Photo" width="200px" height="100"/>
                <td>{{ item.Address }}</td>
                <td>{{ item.TeSeName }}</td>
            </tr>
        </table>

    </div>
</template>

<script setup lang="ts">

import { ref,reactive } from 'vue';

let date=ref(
[
    {
        id:1,
        ShopName:"北京如家酒店",
        Phone: "18888888888",
        Photo: "https://img1.baidu.com/it/u=3776951402,188974010&fm=253&fmt=auto?w=1026&h=665",
        Address:"北京昌平202",
        TeSeName:"豪华婚宴",
    },
    {
        id:2,
        ShopName:"北京汉庭酒店",
        Phone: "18899988888",
        Photo: "https://img0.baidu.com/it/u=385906721,3322194213&fm=253&fmt=auto&app=120&f=JPEG?w=570&h=380",
        Address: "北京昌平201",
        TeSeName:"豪华婚宴"
    }

]
)

</script>

<style scoped>

</style>
